<template>
	<div class="stakeMonitorpieModal">
		<div class="stakeModalTop">
			<div class="stakeModalTop1">
				<img src="/@/assets/images/panoramicMonitoring/u288.png" alt="" />
				<div class="stakeModalTop1_r">
					<p class="stakeModalTop1_r_title">VIN:{{ stationMonitorstakeDetaildata.vin }}</p>
					<div class="stakeModalTop1_r_btm">
						<p v-for="item in toplist">
							<img :src="item.icon" alt="" /><span>{{ item.name }}</span>
							<span :style="{color: `${item.color}`}"> {{ item.value }}{{ item.danwei }}</span>
						</p>
					</div>
				</div>
			</div>
			<div class="stakeModalTop2" v-if="stationMonitorstakeDetaildata">
				<div class="stakeModalTop2_ones">
					<img src="/@/assets/images/panoramicMonitoring/soc.png" alt="" />
					<div class="stakeModalTop2_ones_rt">
						<p>实时SOC（%）</p>
						<p>{{ stationMonitorstakeDetaildata.soc }}%</p>
						<p>目标soc: {{ stationMonitorstakeDetaildata.targetSoc }}%</p>
					</div>
				</div>
				<div class="stakeModalTop2_ones">
					<img src="/@/assets/images/panoramicMonitoring/chargin.png" alt="" />
					<div class="stakeModalTop2_ones_rt">
						<p>实时充电电量（度）</p>
						<p>{{ stationMonitorstakeDetaildata.ccsElectricQuantity }}%</p>
						<p style="visibility: none">1</p>
					</div>
				</div>
				<div class="stakeModalTop2_ones">
					<img src="/@/assets/images/panoramicMonitoring/chargintime.png" alt="" />
					<div class="stakeModalTop2_ones_rt">
						<p>充电时长（分钟）</p>
						<p>58%</p>
						<p>开始时间：{{ stationMonitorstakeDetaildata.time }}</p>
					</div>
				</div>
			</div>
		</div>
		<div class="stakeModalCenter">
			<div class="stakeModalCenter_lt">
				<div class="stakeModalCenter_ltOnes">
					<div class="stakeModalCenter_ltOnes_top">
						<span class="lytitle">SOC变化时间曲线</span>
					</div>
					<stakeline :chartData="stationMonitorsstakeCurveData.socCurve" :yAxisvalue="'分钟'" />
				</div>
				<div class="stakeModalCenter_ltOnes">
					<div class="stakeModalCenter_ltOnes_top">
						<span class="lytitle">SOC变化功率曲线</span>
					</div>
					<stakeline :chartData="stationMonitorsstakeCurveData.socPowerCurve" :yAxisvalue="'攻率(KW)'" />
				</div>
				<div class="stakeModalCenter_ltOnes">
					<div class="stakeModalCenter_ltOnes_top">
						<span class="lytitle">SOC变化电压曲线</span>
					</div>
					<stakeline :chartData="stationMonitorsstakeCurveData.socVoltageCurve" :yAxisvalue="'电压(v)'" />
				</div>
				<div class="stakeModalCenter_ltOnes">
					<div class="stakeModalCenter_ltOnes_top">
						<span class="lytitle">SOC变化电流曲线</span>
					</div>
					<stakeline :chartData="stationMonitorsstakeCurveData.socCurrentCurve" :yAxisvalue="'电流(A)'" />
				</div>
				<div class="stakeModalCenter_ltOnes">
					<div class="stakeModalCenter_ltOnes_top">
						<span class="lytitle">SOC变化单体最高温度变化趋势曲线</span>
					</div>
					<stakeline :chartData="stationMonitorsstakeCurveData.temperatureCurve" :yAxisvalue="'温度(℃)'" />
				</div>
				<div class="stakeModalCenter_ltOnes">
					<div class="stakeModalCenter_ltOnes_top">
						<span class="lytitle">SOC变化温升速率变化趋势曲线</span>
					</div>
					<stakeline :chartData="stationMonitorsstakeCurveData.TempRateCurve" :yAxisvalue="'温升速率(°C/min)'" />
				</div>
			</div>
			<div class="stakeModalCenter_rt">
				<div class="stakeModalCenter_rt_top">
					<div class="selet">
						<span class="lytitle">累计充电量</span>
						<a-space>
							<a-radio-group v-model:value="changeTimedata" button-style="solid" @change="changeTime">
								<a-radio-button value="1">近30天</a-radio-button>
								<a-radio-button value="2">近12月</a-radio-button>
							</a-radio-group>
							<!-- <span @click="changeTime(1)" :class="title ? 'title' : 'emptyTitl">近30天</span>
							<a-divider type="vertical" />
							<span @click="changeTime(2)">近12月</span> -->
						</a-space>
					</div>
					<a-progress :percent="stakeChargingDetailData.totalCapacityRate" :show-info="false" />
					<div class="ljcdldiv">
						<div>
							充电量： <span class="ljcdl">{{ stakeChargingDetailData.totalCapacity }}度</span>
						</div>
						<div>
							占全站充电量比： <span class="ljcdl">{{ stakeChargingDetailData.totalCapacityRate }}%</span>
						</div>
					</div>
				</div>
				<div class="stakeModalCenter_rtOnes">
					<div class="stakeModalCenter_rtOnes1">
						<span class="lytitle">累计充电次数</span>
					</div>
					<div class="stakeModalCenter_rtOnes2" style="text-align: center">
						<a-progress type="circle" :percent="stakeChargingDetailData.totalChargeNumRate" strokeColor="#2ec22c" strokeWidth="13">
							<template #format="percent">
								<div style="color: #2ec22c">{{ stakeChargingDetailData.totalChargeNum }}</div>
								<div style="font-size: 14px; margin-top: 10px">订单数（笔）</div>
							</template>
						</a-progress>
					</div>
					<p class="stakeModalCenter_rtOnes3">占全站充电次数比：{{ stakeChargingDetailData.totalChargeNumRate }}%</p>
				</div>
				<div class="stakeModalCenter_rtOnes">
					<div class="stakeModalCenter_rtOnes1">
						<span class="lytitle">累计充电时长</span>
					</div>
					<div class="stakeModalCenter_rtOnes2" style="text-align: center">
						<a-progress type="circle" :percent="stakeChargingDetailData.totalChargeTimeRate" strokeColor="#f8df46" strokeWidth="13">
							<template #format="percent">
								<div style="color: #f8df46">{{ stakeChargingDetailData.totalChargeTime }}</div>
								<div style="font-size: 14px; margin-top: 10px">小时</div>
							</template>
						</a-progress>
					</div>
					<p class="stakeModalCenter_rtOnes3">占全站充电时长比：{{ stakeChargingDetailData.totalChargeTimeRate }}%</p>
				</div>
				<div class="stakeModalCenter_rtOnes">
					<div class="stakeModalCenter_rtOnes1">
						<span class="lytitle">容量利用率</span>
					</div>
					<div class="stakeModalCenter_rtOnes2" style="text-align: center">
						<a-progress type="circle" :percent="stakeChargingDetailData.capacityUseRate" strokeColor="#8073e6" strokeWidth="13">
							<template #format="percent">
								<div style="color: #8073e6">{{ stakeChargingDetailData.capacityUseRate }}</div>
								<div style="font-size: 14px; margin-top: 10px">利用率</div>
							</template>
						</a-progress>
					</div>
					<p class="stakeModalCenter_rtOnes3">全站容量利用率：{{ stakeChargingDetailData.capacityUseRate }}%</p>
				</div>
			</div>
		</div>
		<div class="stakeModalBom">
			<span class="lytitle">近期订单</span>
			<testTable />
		</div>
	</div>
</template>

<script lang="js" name="stakeMonitorpieModal" setup>
	const props = defineProps({
		imei: {
			type: String,
		},
	});
	import {ref, reactive, computed, unref} from 'vue';
	import stakeMonitorpieModal_img1 from '/@/assets/images/panoramicMonitoring/u326.png';
	import stakeMonitorpieModal_img2 from '/@/assets/images/panoramicMonitoring/u329.png';
	import stakeMonitorpieModal_img3 from '/@/assets/images/panoramicMonitoring/u332.png';
	//底部表格s src\views\panoramicMonitoring\SiteMonitoring\index.vue
	import testTable from '/@/views/panoramicMonitoring/SiteMonitorings/index.vue';
	//底部表格e
	import stakeline from './stakeline.vue';
	import {useRoute} from 'vue-router';
	import {stationMonitorsstakeCurve, stationMonitorstakeDetail, stakeChargingDetail} from '@/api/screen/yewuapi.js';
const changeTimedata=ref('1')
	// 获取当前路由对象
	const route = useRoute();
	const stationMonitorstakeDetaildata = ref({
		vin: '',
	});
	watch(
		() => props.imei,
		() => {
			initdata();
		},
		{
			deep: true,
		}
	);
	const stationMonitorsstakeCurveData = ref({
		socCurve: [], //soc 时间曲线
		socPowerCurve: [], //soc 功率曲线
		socVoltageCurve: [], //soc 电压曲线
		socCurrentCurve: [], //soc 电流曲线
		temperatureCurve: [], //单体最高温度变化趋势
		TempRateCurve: [], //温升速率变化趋势
	});
	function initdata() {
		stationMonitorsstakeCurve({imei: props.imei, isA: true}).then((res) => {
			stationMonitorsstakeCurveData.value = res;
			console.log('res.stationMonitorsstakeCurveData', res);
		});
		stationMonitorstakeDetail({imei: props.imei, isA: true}).then((res) => {
			console.log('res.stationMonitorstakeDetail', res);
			stationMonitorstakeDetaildata.value = res;
			toplist.value[0].value = res.maximumPermissibleChargingVoltage;
			toplist.value[1].value = res.voltageOutputValue;
			toplist.value[2].value = res.maximumChargingCurrent;
			toplist.value[3].value = res.currentOutputValue;
			toplist.value[4].value = res.maximumBatteryTemperature;
			toplist.value[0].value = res.maximumPermissibleChargingVoltage;
		});
		getstakeChargingDetail(1);
	}
	const stakeChargingDetailData = ref({});
	function getstakeChargingDetail(params) {
		stakeChargingDetail({imei: props.imei, type: params}).then((res) => {
			console.log('res.stakeChargingDetail', res);
			stakeChargingDetailData.value = res;
		});
	}
	function changeTime(type) {
		console.log('changeTime',type);
		
		getstakeChargingDetail(changeTimedata.value);
	}
	// 获取路由参数
	onMounted(() => {
		console.log('route.params1111111;', route, props.imei);
		//stationMonitorstake({stationId: route.query.stationId}).then((res) => {});
		//
		initdata();
	});
	const toplist = ref([
		{
			name: '最高允许充电电压',
			value: 20,
			icon: stakeMonitorpieModal_img1,
			danwei: 'V',
		},
		{
			name: '实时充电电压',
			value: 20,
			icon: stakeMonitorpieModal_img1,
			danwei: 'V',
		},
		{
			name: '最高允许充电电流',
			value: 20,
			icon: stakeMonitorpieModal_img2,
			danwei: 'A',
			color: '#1890FF',
		},
		{
			name: '实时充电电流',
			value: 20,
			icon: stakeMonitorpieModal_img2,
			danwei: 'A',
			color: '#1890FF',
		},
		{
			name: '最高允许充电温度',
			value: 20,
			icon: stakeMonitorpieModal_img3,
			danwei: '℃',
			color: 'red',
		},
		{
			name: '实时最高温度',
			value: 20,
			icon: stakeMonitorpieModal_img3,
			danwei: '℃',
			color: 'red',
		},
	]);
	// 日期
	import dayjs from 'dayjs';
	const rangePresets = ref([
		{
			label: 'Last 7 Days',
			value: [dayjs().add(-7, 'd'), dayjs()],
		},
		{
			label: 'Last 14 Days',
			value: [dayjs().add(-14, 'd'), dayjs()],
		},
		{
			label: 'Last 30 Days',
			value: [dayjs().add(-30, 'd'), dayjs()],
		},
		{
			label: 'Last 90 Days',
			value: [dayjs().add(-90, 'd'), dayjs()],
		},
	]);
	const onRangeChange = (dates, dateStrings) => {
		if (dates) {
			console.log('From: ', dates[0], ', to: ', dates[1]);
			console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
		} else {
			console.log('Clear');
		}
	};
</script>

<style lang="less" scoped>
	.ljcdldiv {
		display: flex;
		justify-content: space-between;
	}
	.ljcdl {
		font-weight: 600;
		font-size: 16px;
	}
	.lytitle {
		position: relative;
		padding-left: 10px;
		font-weight: 400;
		font-style: normal;
		color: rgb(0, 0, 0);
		font-size: 18px;

		&::before {
			content: '';
			width: 4px;
			height: 16px;
			background-color: #009688;
			position: absolute;
			left: 0;
			top: 6px;
		}
	}

	.stakeMonitorpieModal {
		background: #f2f2f2;
		// box-sizing: border-box;
		// padding: 20px;
		min-width: 1220px;
		width: 1420px;

		.stakeModalTop {
			background: #fff;
			display: flex;
			box-sizing: border-box;
			padding: 20px;

			.stakeModalTop1 {
				display: flex;

				img {
					width: 59px;
					height: 192px;
				}

				.stakeModalTop1_r {
					margin-left: 10px;

					.stakeModalTop1_r_title {
						font-size: 18px;
					}

					.stakeModalTop1_r_btm {
						width: 400px;
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;

						img {
							width: 16px;
							height: 16px;
						}

						p {
							display: flex;
							align-items: center;
							width: 194px;

							span:nth-of-type(1) {
								margin-left: 5px;
								margin-right: 15px;
							}
						}
					}
				}
			}

			.stakeModalTop2 {
				display: flex;
				justify-content: space-around;
				align-items: center;
				width: 100%;

				.stakeModalTop2_ones {
					display: flex;

					img {
						width: 50px;
						height: 50px;
						margin-right: 20px;
					}

					.stakeModalTop2_ones_rt {
						font-weight: 300;
						font-style: normal;
						font-size: 14px;
						letter-spacing: normal;
						color: #333333;

						p {
							margin-bottom: 3px;
						}

						p:nth-of-type(2) {
							font-weight: 600;
							font-style: normal;
							font-size: 28px;
							color: #333333;
						}
					}
				}
			}
		}

		.stakeModalCenter {
			display: flex;
			margin-top: 10px;

			.stakeModalCenter_lt {
				display: flex;
				flex-wrap: wrap;
				width: 75%;

				.stakeModalCenter_ltOnes {
					background: #fff;
					margin-right: 10px;
					margin-bottom: 10px;
					box-sizing: border-box;
					padding: 15px;
				}
			}

			.stakeModalCenter_rt {
				width: 25%;
				background: #fff;

				box-sizing: border-box;
				padding: 15px;

				.stakeModalCenter_rt_top {
					.selet {
						display: flex;
						justify-content: space-between;
					}
				}

				.stakeModalCenter_rtOnes {
					margin-bottom: 60px;

					.stakeModalCenter_rtOnes3 {
						text-align: center;
					}

					.stakeModalCenter_rtOnes2 {
						margin-top: 20px;
						margin-bottom: 20px;
					}
				}
			}
		}
		.stakeModalBom {
			background: white;
			padding: 10px;
			margin-top: 10px;
		}
	}
</style>
